﻿
@{
    ViewData["Title"] = "Notification";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Toast notifications</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="@Url.Action("Dashboard_1", "Dashboards")">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a>UI Elements</a>
            </li>
            <li class="active breadcrumb-item">
                <strong>Toast notifications</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Toast examples</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <p>
                        Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
                    </p>

                    <div class="row">
                        <div class="col-md-5">
                            <div class="bd-light">
                                <h5>Example toast</h5>

                                <div class="toast toast-bootstrap show" role="alert" aria-live="assertive" aria-atomic="true">
                                    <div class="toast-header">
                                        <i class="fa fa-newspaper-o"> </i>
                                        <strong class="mr-auto m-l-sm">Notification</strong>
                                        <small>2 seconds ago</small>
                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="toast-body">
                                        Hello, you can push notifications to your visitors with this toast feature.
                                    </div>
                                </div>

                                <div class="toast toast-bootstrap show" role="alert" aria-live="assertive" aria-atomic="true">
                                    <div class="toast-header">
                                        <i class="fa fa-bar-chart"> </i>
                                        <strong class="mr-auto m-l-sm">Notification with plugins</strong>
                                        <small>5 mins ago</small>
                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="toast-body">
                                        <small>
                                            Sales in current month
                                        </small>
                                        <div id="sparkline1" class="m-b-sm"></div>
                                        <div class="row">
                                            <div class="col-4">
                                                <small class="stats-label">Pages / Visit</small>
                                                <h4>236 321.80</h4>
                                            </div>

                                            <div class="col-4">
                                                <small class="stats-label">% New Visits</small>
                                                <h4>46.11%</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Last week</small>
                                                <h4>432.021</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-7">

                            <h4> Examples </h4>

                            <button type="button" class="btn btn-primary" id="showtoast">Show Toast</button>
                            <button type="button" class="btn btn-white" id="showleftbottom">Show left bottom corner</button>

                            <h4>Placement</h4>
                            <p>
                                Place toasts with custom CSS absolute properties, for example <code>top: 10; right: 10</code> The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.
                            </p>

                            <h4>Stacking</h4>
                            <p>
                                When you have multiple toasts put into wrapping element so they can easily stack.
                            </p>

                            <h4>Usage</h4>
                            <p>
                                Initialize toasts via JavaScript:
                                <pre>$('.toast').toast(option)</pre>
                            </p>




                        </div>
                    </div>
                    <div>
                        <h4>Methods</h4>
                        <p>
                            All API methods are asynchronous and start a transition.
                        </p>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Method</th>
                                    <th>Example</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>.toast('show')</code></td>
                                    <td><code>$('#element').toast('show')</code></td>
                                    <td> Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.</td>
                                </tr>
                                <tr>
                                    <td><code>.toast('hide')</code></td>
                                    <td><code>$('#element').toast('hide')</code></td>
                                    <td>Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.</td>
                                </tr>
                                <tr>
                                    <td><code>.toast('dispose')</code></td>
                                    <td><code>$('#element').toast('dispose')</code></td>
                                    <td>Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.</td>
                                </tr>

                            </tbody>
                        </table>

                    </div>

                    <div class="row m-t-lg">
                        <div class="col-lg-12">
                            <small>Toast example code</small>
                            <pre class="p-m">
&lt;div class="toast toast-bootstrap show" role="alert" aria-live="assertive" aria-atomic="true"&gt;
    &lt;div class="toast-header"&gt;
        &lt;i class="fa fa-newspaper-o"&gt; &lt;/i&gt;
        &lt;strong class="mr-auto m-l-sm">Notification&lt;/strong&gt;
        &lt;small&gt;2 seconds ago&lt;/small&gt;
        &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
            &lt;span aria-hidden="true">&times;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="toast-body"&gt;
        Hello, you can push notifications to your visitors with this toast feature.
    &lt;/div&gt;
&lt;/div&gt;
                            </pre>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>
</div>



@section Toast {

    <!-- Toast notifications -->
    <div style="position: absolute; top: 20px; right: 20px;">

        <div class="toast toast1 toast-bootstrap" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <i class="fa fa-newspaper-o"> </i>
                <strong class="mr-auto m-l-sm">Notification</strong>
                <small>2 seconds ago</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                Hello, you can push notifications to your visitors with this toast feature.
            </div>
        </div>

    </div>

    <div class="toast toast2 toast-bootstrap" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; bottom: 20px; left: 20px">
        <div class="toast-header">
            <i class="fa fa-newspaper-o"> </i>
            <strong class="mr-auto m-l-sm">Notification</strong>
            <small>2 seconds ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Hello, you can push notifications to your visitors with this toast feature.
        </div>
    </div>

}

@section Scripts {
    <environment names="Development">
        <script src="~/lib/sparkline/jquery.sparkline.min.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/lib/sparkline/jquery.sparkline.min.js"></script>
    </environment>

    <script type="text/javascript">
        $(function () {

            let toast1 = $('.toast1');
            let toast2 = $('.toast2');
            toast1.toast({
                delay: 5000,
                animation: true
            });
            toast2.toast({
                delay: 5000,
                animation: true
            });



            $('#showtoast').on('click', function (e) {
                e.preventDefault();
                toast1.toast('show');

            })


            $('#showleftbottom').on('click', function (e) {
                e.preventDefault();
                toast2.toast('show');

            })

            $("#sparkline1").sparkline([24, 43, 43, 35, 44, 32, 44, 62], {
                type: 'line',
                width: '100%',
                height: '50',
                lineColor: '#1ab394',
                fillColor: "transparent"
            });

        })
    </script>
}